<template>
  <a-card title="已成单-老客户回访" :style="{ marginTop: '20px' }">
    <div slot="extra">
      <a-button type="danger" size="small" ghost @click="$router.push({ name: 'PaidCustomer' })">所有客户</a-button>
    </div>
    <s-table
      bordered
      ref="table"
      size="middle"
      :row-key="(record) => record.customer_id"
      :columns="paidColumns"
      :data="paidData"
      :expandedRowKeys="expandedRowKeys"
      @expand="expands"
    >
      <a-table
        slot="expandedRowRender"
        :columns="innerColumns"
        :data-source="innerData"
        :pagination="false"
      >
        <span slot="status">4000.00</span>
        <span slot="upgradeNum"> <a-badge status="success" /> 已开启</span>
        <span slot="operation">
          <a-button type="link">业务详情</a-button>
        </span>
      </a-table>
      <div
        slot="customerStatusSelect"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-select
          style="width: 188px; margin-bottom: 8px; display: block;"
          placeholder="选择客户状态"
          @change="value => setSelectedKeys(value ? [value] : [])"
        >
          <a-select-option v-for="(item, index) in customerStatus" :key="index" :value="index">
            {{ item }}
          </a-select-option>
        </a-select>
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        >
          筛选
        </a-button>
        <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
          重置
        </a-button>
      </div>
      <div
        slot="filterDropdown"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-input
          v-ant-ref="c => (searchInput = c)"
          :placeholder="`筛选${column.title}`"
          :value="selectedKeys[0]"
          style="width: 188px; margin-bottom: 8px; display: block;"
          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
        />
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        >
          筛选
        </a-button>
        <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
          重置
        </a-button>
      </div>
      <template slot="phone" slot-scope="text, record">
        {{ text }} <a-icon type="phone" theme="filled" :style="{ color: '#1890ff', cursor: 'pointer' }" @click="makePhone(record.customer_id)" />
      </template>
      <template slot="action" slot-scope="text, record">
        <a-button type="primary" size="small" :style="{ marginRight: '10px' }" @click="$router.push({ name: 'AddContract', query: {customer_id: record.customer_id} })">做合同</a-button>
        <a-button type="primary" size="small" @click="$router.push({ name: 'CustomerDetail', params: {id: record.customer_id} })">详情</a-button>
      </template>
    </s-table>
    <phone-modal v-if="modalVisible" :customer-id="customerId" @cancel="modalExit"></phone-modal>
  </a-card>
</template>

<script>
import { STable, PhoneModal } from '@/components'
import { getPaid } from '@/api/adviser'
import col from '@/columns/adviser'
const paidColumns = col.paid

const innerColumns = [
  { title: '业务编号', dataIndex: 'date', key: 'date' },
  { title: '业务名称', dataIndex: 'name', key: 'name' },
  { title: '费用', dataIndex: 'status', key: 'status', scopedSlots: { customRender: 'status' } },
  { title: '官费', dataIndex: 'status', key: 'status', scopedSlots: { customRender: 'status' } },
  { title: '状态', dataIndex: 'upgradeNum', key: 'upgradeNum', scopedSlots: { customRender: 'upgradeNum' } },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  components: {
    STable,
    PhoneModal
  },
  name: 'PaidCustomer',
  data () {
    return {
      innerColumns,
      innerData: [],
      paidColumns,
      paidData: parameters => {
        return getPaid(parameters).then(res => {
          return res.result
        })
      },
      customerId: '',
      modalVisible: false,
      expandedRowKeys: []
    }
  },
  methods: {
    add (id) {
      this.$router.push({ name: 'AddContract', query: { customer_id: id } })
    },
    modalExit (visible) {
      this.modalVisible = visible
    },
    makePhone (id) {
      this.customerId = id
      this.modalVisible = true
    },
    expands (expanded, record) {
      this.expandedRowKeys = []
      if (expanded) {
        this.expandedRowKeys.push(record.customer_id)
      } else {
        this.expandedRowKeys = []
      }
    },
    /**
     * o
     * @param selectedKeys
     * @param confirm
     * @param dataIndex
     */
    handleSearch (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
    },
    /**
     * 清除
     * @param clearFilters
     */
    handleReset (clearFilters) {
      clearFilters()
      this.searchText = ''
    }
  }
}
</script>

<style scoped>

</style>
